<template>
  <div id="app">
    <!-- 这是Home页面 -->
    <!-- <home @searchClick='homeClick' /> -->
    <component :is="index == 0 && (flag?search : home)"
    @searchClick='homeClick' @gohome="backhome"></component>
    <component :is="index == 1 && category"></component>
    <component :is="index == 2 && shopingCrat"></component>
    <component :is="index == 3 && profile"></component>
    <!-- 搜索页面 -->
    <!-- <search-box></search-box> -->

    <!-- 这是tab-bar菜单栏 -->
    <tab-bar v-show="!flag" @changeIndex="tabBarClisk"></tab-bar>

  </div>
</template>

<script>
import TabBar from "./components/common/Tab_Bar/TabBar.vue"
import Home from "./views/Home"
import SearchBox from './views/SearchBox'
import Category from './views/Category.vue'
import ShopingCrat from './views/ShopingCrat.vue'
import Profile from './views/Profile'


export default {
  name: 'App',
  components: {
    // Home,
    TabBar
    // SearchBox
  },
  data(){
    return{
      index:0,
      flag:false,
      home:Home,
      search:SearchBox,
      category : Category,
      shopingCrat : ShopingCrat,
      profile :Profile
    }
  },
  methods:{
    homeClick(r){
      this.flag = r
    },
    tabBarClisk(i){
      this.index = i
    },
    backhome(){
      this.flag = false
    }
  }
}
</script>

<style>
  *{margin: 0;padding: 0;}
</style>
